<template>
  <el-card class="box-card">
    <div
      v-for="(item, index) in cardList"
      :key="item"
      class="text item"
      @click="btnclick({ index, item })"
    >
      {{ item }}
    </div>
  </el-card>
</template>

<script setup lang="ts">
// import { defineProps } from 'vue'
const props = defineProps({
  cardList: {
    default: ['1', '2', '3'],
  },
})
const emit = defineEmits(['clickEvent'])

const list = props.cardList
const btnclick = (info: any) => {
  emit('clickEvent', info)
}
</script>

<style scoped>
:root {
  --el-button-hover-bg-color: brown;
}
.text {
  font-size: 14px;
}

.item {
  padding: 5px 0;
  cursor: default;
}
.item:hover {
  /* background-color: var(--el-button-hover-bg-color); */
  background-color: #e2e0e0;
  color: #222;
}

.box-card {
  width: 100px;
}
.el-card__body {
  padding: 0;
}
</style>
